<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,
        .right {
            float: left;
        }

        .left {
            width: 200px;
            border-right: 1px solid #666;
        }

        .right {
            margin-left: 20px;
        }

        .info {
            position: relative;
        }

        .out {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(220, 240, 240, .8);
        }

        .inner {
            width: 400px;
            height: 250px;
            background-color: #fff;
            border-radius: 8px;
            margin-left: 400px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <v-left @jump="getPath"></v-left>
        <v-right :info="showName"></v-right>
    </div>
    <template id="left">
        <div class="left">
            <ul>
                <li v-for="path in pathList" :key="path.name" @click="change(path.path)">{{path.name}}</li>
            </ul>
        </div>
    </template>
    <template id="right">
        <div class="right">
            <info v-show="info === 'info'"></info>
            <cart v-show="info === 'cart'"></cart>
            <monkey v-show="info === 'monkey'"></monkey>
        </div>
    </template>
    <template id="info">
        <div class="info">
            <div class="out" v-show="isShow">
                <div class="inner">
                    <input type="text" placeholder="姓名" v-model="name">
                    <br>
                    <input type="text" placeholder="性别" v-model="sex">
                    <br>
                    <input type="text" placeholder="年龄" v-model="age">
                    <br>
                    <input type="text" placeholder="手机" v-model="phone">
                    <br>
                    <button @click="addStudent">新增</button>
                    <button @click="cancel">取消</button>
                </div>
            </div>
            <button @click="add">新增</button>
            <table border="1">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>手机</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :class="{odd: index % 2}" v-for="(item, index) in studentsList" :key="index">
                        <td>{{item.name}}</td>
                        <td>{{item.sex}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.phone}}</td>
                        <td>2022-4-2 09:10:00</td>
                        <td>
                            <button>del</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    <template id="cart">
        <div>
            <p>cart</p>
        </div>
    </template>
    <template id="monkey">
        <div>
            <p>monkey</p>
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                showName: 'info'
            },
            components: {
                vLeft: {
                    template: '#left',
                    data() {
                        return {
                            pathList: [
                                { name: '信息登记表', path: 'info' },
                                { name: '购物车', path: 'cart' },
                                { name: '金箍棒', path: 'monkey' },
                            ]
                        }
                    },
                    methods: {
                        change(path) {
                            // 点击左侧修改右侧，所以先子传父后父传子
                            this.$emit('jump', path)
                        }
                    }
                },
                vRight: {
                    template: '#right',
                    props: ['info'],
                    data() {
                        return {
                            showName: this.info,
                        }
                    },
                    components: {
                        info: {
                            template: '#info',
                            data() {
                                return {
                                    studentsList: [],
                                    // 弹窗是否显示
                                    isShow: false,
                                    name: '',
                                    sex: '',
                                    age: '',
                                    phone: '',
                                }
                            },
                            created() {
                                // this.showName = this.info;
                                this.studentsList = JSON.parse(localStorage.getItem('studentsList')) || []
                            },
                            methods: {
                                add() {
                                    // 展示弹窗
                                    this.isShow = true;
                                },
                                cancel() {
                                    // 关闭弹窗
                                    this.isShow = false;
                                    // 清空输入框
                                    this.name = '';
                                    this.sex = '';
                                    this.age = '';
                                    this.phone = '';
                                },
                                addStudent() {
                                    this.studentsList.push({
                                        name: this.name,
                                        sex: this.sex,
                                        age: this.age,
                                        phone: this.phone,
                                        time: '2022-04-06 10:10'
                                    });
                                    this.cancel();
                                }
                            }
                        },
                        cart: {
                            template: '#cart'
                        },
                        monkey: {
                            template: '#monkey'
                        }
                    }
                }
            },
            methods: {
                // 接受子组件的值
                getPath(val) {
                    this.showName = val;
                    console.log('fu:', this.showName);
                }
            }
        })
    </script>
</body>

</html>